<!--
 * @Description: 类型筛选组件
 * @Author: wangqian
 * @LastEditors: wangqian
 * @Date: 2021-06-22 16:19:24
 * @LastEditTime: 2021-06-22 21:25:45
-->
<template>
  <tree-item
    :type="options.type"
    :data="targetData"
    :collapseClick="collapseSelect"
    @change="onCheckChange"
    v-show="visible"
  ></tree-item>
</template>

<script lang="ts">
import { defineComponent, reactive, PropType, toRefs, ref, toRaw, watch } from 'vue';
import { getNodeById, depthEach } from '@/utils/tree';
import { TreeProps } from '@/typing';
import TreeItem from './tree-item.vue';
import {
  CardItemProps,
  getHeightCheckedNodes,
  refreshAllSonNodes,
  refreshAllParentNodes,
} from '@/components/supper-select/select-item/index';

export default defineComponent({
  props: {
    options: {
      type: Object as PropType<CardItemProps>,
      default: () => {
        return {
          name: '',
          type: '',
          data: [],
        };
      },
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
  emits: ['checkedChange'],
  setup(props, { emit }) {
    const state = reactive({});
    const targetData = ref<TreeProps | any>({});

    // 初始化组件数据
    const initTargetData = (): any => {
      targetData.value = toRaw(props.options.data as Array<TreeProps>);
    };

    // 多选框change事件
    const onCheckChange = (e: any, o: any) => {
      try {
        let node: any = o;
        let parentNode: any = null;

        if (o.code === '0') {
          o.attributes.checked = !o?.attributes?.checked;
          o.attributes.indeterminate = false;
          depthEach(targetData.value.children, item => {
            item.attributes.checked = o.attributes.checked;
            item.attributes.indeterminate = false;
          });
          emit('checkedChange');
          return;
        }

        const checked = (node.attributes.checked = !node?.attributes?.checked);
        depthEach([targetData.value], item => {
          if (item.code === o.parentCode) parentNode = item;
        });
        refreshAllParentNodes(parentNode, [targetData.value]);
        refreshAllSonNodes(node, checked);
        emit('checkedChange');
      } catch (err) {
        console.log('onCheckChange err=', err);
      }
    };
    // 获取所有选中的节点
    const getCurrentCheckedNodes = () => {
      const checkedList: Array<any> = [];
      depthEach(targetData.value.children, item => {
        item.attributes.checked && checkedList.push(item);
      });
      const heigthCheckedList = getHeightCheckedNodes(checkedList);
      return heigthCheckedList;
    };
    // 取消当前节点的选中状态
    const removeChecked = (node: TreeProps | null) => {
      if (node) {
        node.attributes.checked = false;
        node.attributes.indeterminate = false;
        const parentNode = getNodeById('code', node.parentCode, [targetData.value]);
        refreshAllParentNodes(parentNode, [targetData.value]);
        refreshAllSonNodes(node, false);
      } else {
        depthEach([targetData.value], item => {
          item.attributes.checked = false;
          item.attributes.indeterminate = false;
        });
      }
    };

    const collapseSelect = node => {
      depthEach(targetData.value.children, item => {
        if (node.code === item.code) {
          item.attributes.collapse = !node.attributes.collapse;
        } else {
          if (item.attributes.level >= node.attributes.level) item.attributes.collapse = false;
        }
      });
    };

    watch(
      () => props.options.data,
      () => {
        initTargetData();
      },
      { deep: true },
    );
    return {
      ...toRefs(state),
      targetData,
      onCheckChange,
      removeChecked,
      getCurrentCheckedNodes,
      collapseSelect,
    };
  },
  components: {
    TreeItem,
  },
});
</script>
<style scoped lang="less"></style>
